<template>
  <div class="c2cTrade">
    <Other-Header index="1" bgColor="#5741d9"></Other-Header>
    <div class="mainSection orderSection">
      <div class="inner">
        <h2 class="title">{{$t('l.appeal_about0')}}</h2>

        <!-- 订单头部 -->
        <h3 class="orderHeader">
          <div class="orderTitle">
            <template v-if="orderinfo.orderType==1">{{$t('l.order_about0a', [orderinfo.another])}}</template>
            <template
              v-else-if="orderinfo.orderType==2"
            >{{$t('l.order_about0b', [orderinfo.another])}}</template>
            <template
              v-else-if="orderinfo.orderType==3"
            >{{$t('l.order_about47a', [orderinfo.another])}}</template>
            <template
              v-else-if="orderinfo.orderType==4"
            >{{$t('l.order_about47b', [orderinfo.another])}}</template>
            <span class="orderAmount">
              <em>{{orderinfo.quantity}}</em>
              {{orderinfo.currencyCode}}
            </span>
          </div>
        </h3>

        <!-- 交易信息 -->
        <div class="orderBox priceAbout clearfix" style="margin-top: 25px;">
          <div class="boxInner">
            <div class="boxRow">
              <div class="boxCol fl wid33" style="border-right:1px solid #e7e7e7">
                <span class="titleName">{{$t('l.order_about9')}}</span>
                <br />
                <span>{{orderinfo.totalPrice}} {{orderinfo.legalCurrencyCode}}</span>
              </div>
              <div class="boxCol fl wid33" style="border-right:1px solid #e7e7e7">
                <span class="titleName">{{$t('l.order_about11')}}</span>
                <br />
                <span>{{orderinfo.price}} {{orderinfo.legalCurrencyCode}}</span>
              </div>
              <div class="boxCol fl wid33">
                <span class="titleName">{{$t('l.order_about10')}}</span>
                <br />
                <span>{{orderinfo.quantity}} {{orderinfo.currencyCode}}</span>
              </div>
            </div>
            <div class="boxRow">
              <div class="boxCol fl wid33" style="border-right:1px solid #e7e7e7">
                <span class="titleName">{{$t('l.order_about1')}}</span>
                <br />
                <span>{{orderinfo.orderNo}}</span>
              </div>
              <div class="boxCol fl wid33" style="border-right:1px solid #e7e7e7">
                <span class="titleName">{{$t('l.order_about13')}}</span>
                <br />
                <span>
                  <span class="paybox">
                    <img v-if="orderinfo.payMode==1" src="../../assets/images/pay_zfb.png" alt />
                    <img
                      v-else-if="orderinfo.payMode==2"
                      src="../../assets/images/pay_weixin.png"
                      alt
                    />
                    <img
                      v-else-if="orderinfo.payMode==3"
                      src="../../assets/images/pay_cards.png"
                      alt
                    />
                  </span>
                  {{orderinfo.payMode==1 ? $t('l.order_about13a') : (orderinfo.payMode==2 ? $t('l.order_about13b') : $t('l.order_about13c'))}}
                </span>
              </div>
              <div class="boxCol fl wid33">
                <span class="titleName">{{$t('l.order_about56')}}</span>
                <br />
                <span v-if="orderinfo.status==1" class="color-paid">{{$t('l.order_list16')}}</span>
                <span v-else-if="orderinfo.status==2" class="color-confirm">{{$t('l.order_list17')}}</span>
                <span
                  v-else-if="orderinfo.status==3"
                  class="color-cancelled"
                >{{$t('l.order_list19')}}</span>
                <span v-else-if="orderinfo.status==4">{{$t('l.order_list20')}}</span>
                <span
                  v-else-if="orderinfo.status==5"
                  class="color-completed"
                >{{$t('l.order_list18')}}</span>
              </div>
            </div>
          </div>
          <div class="fr tradeRate">
            <span>
              {{$t('l.order_about14a')}}
              <em>{{$t('l.order_about14b')}}</em>
            </span>
          </div>
        </div>

        <!-- 提交申诉 -->
        <div class="orderBox appealAbout">
          <div class="title">{{$t('l.appeal_about1')}}</div>
          <el-form
            ref="appealinfo"
            :model="appealinfo"
            :rules="rules"
            label-position="top"
            label-width="120px"
          >
            <el-row>
              <el-col :span="12">
                <el-col :span="24">
                  <el-form-item :label="$t('l.appeal_about10')" prop="title">
                    <el-input
                      :placeholder="$t('l.appeal_about12')"
                      maxlength="50"
                      v-model="appealinfo.title"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" style="margin-top: 10px;">
                  <el-form-item :label="$t('l.appeal_about11')" prop="descr">
                    <el-input
                      type="textarea"
                      :placeholder="$t('l.appeal_about14')"
                      maxlength="100"
                      :rows="3"
                      v-model="appealinfo.descr"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="$t('l.appeal_about15')" class="upload-item">
                  <div class="uploadBox">
                    <div class="uploadReady" v-show="!filepath.length">
                      <img src="../../assets/images/picimg.png" />
                      <p>{{$t('l.appeal_about16')}}</p>
                      <p>
                        <span class="ext">{{$t('l.appeal_about17')}}.png .jpeg .jpg</span>
                      </p>
                      <input
                        type="file"
                        ref="file"
                        id="uploadAppeal"
                        @change="handleFileChange($event)"
                        style="position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;z-index:9;"
                      />
                    </div>
                    <div class="fileImg" v-show="filepath.length">
                      <!--filepath-->
                      <div class="imgItem" v-for="(img, index) in filepath" :key="img.id">
                        <i @click="uploadImgDelete(index)"></i>
                        <img :src="img" style="width:100%;max-height:100%;" />
                      </div>
                      <div class="imgItem upload" v-show="filepath.length < 3">
                        <p>
                          <span class="icon"></span>
                        </p>
                        <p class="text">{{$t('l.appeal_about5')}}</p>
                        <input
                          type="file"
                          ref="file"
                          id="uploadAppealMore"
                          @change="handleFileChange($event)"
                          style="position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;z-index:9;"
                        />
                      </div>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <div class="appealBtn" @click="onSubmit">{{$t('l.appeal_about18')}}</div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import { api } from "@/api/api";
import OtherHeader from "@/components/otherHeader";
import Footer from "@/components/footer";
import lrz from "lrz";

export default {
  components: {
    OtherHeader,
    Footer
  },
  data() {
    return {
      orderinfo: {
        orderNo: "",
        another: "",
        currencyCode: "",
        legalCurrencyCode: "",
        orderAmount: "",
        quantity: "",
        price: "",
        orderType: 1
      },
      filepath: [],
      filepathdata: [],
      appealinfo: {
        title: "",
        descr: "",
        materials: ""
      },
      rules: {
        title: [
          {
            required: true,
            message: this.$t("l.other_a_10"),
            trigger: "blur"
          }
        ],
        descr: [
          {
            required: true,
            message: this.$t("l.appeal_about29"),
            trigger: "blur"
          }
        ]
      }
    };
  },
  async created() {
    this.getOrderDetail();
  },
  methods: {
    // 获取订单详情
    async getOrderDetail() {
      let res = await api.orderDetail({
        orderNo: this.$route.params.orderNo
      });
      let { code, data, msg } = res.data;

      if (code == 0) {
        Object.assign(this.orderinfo, data);
      } else {
        this.$layer.msg(msg);
      }
    },

    //获取一次性token
    async getOnceToken() {
      let res = await api.getOnceToken();
      if (res.data.code == 0) {
        return res.data.data.resultToken;
      }
    },
    /* 提交申诉 */
    async submitAppeal() {
      if (!this.filepathdata.length) {
        this.$layer.msg(this.$t("l.appeal_about6a"));
        return false;
      }
      let params = {
        title: this.appealinfo.title,
        orderId: this.orderinfo.orderNo,
        descr: this.appealinfo.descr,
        onceToken: await this.getOnceToken(),
        materials: this.filepathdata.join(",")
      };
      let res = await api.saveAppeal(params);
      let { code, msg } = res.data;
      if (code == 0) {
        this.$router.push(`/appealDetail/${this.orderinfo.orderNo}`);
      } else {
        this.$layer.msg(msg);
      }
    },
    // 提交表单
    onSubmit() {
      this.$refs["appealinfo"].validate(valid => {
        if (valid) {
          this.submitAppeal();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleFileChange(data) {
      let that = this;
      let file = data.target.files;
      if (!file.length) return; // 取消上传图片报错
      if (!file || !window.FileReader) return;
      if (/^image/.test(file[0].type)) {
        // 创建一个reader
        var reader = new FileReader();
        reader.readAsDataURL(file[0]);
        reader.onloadend = function(e) {
          that.filepath.push(e.target.result);
          lrz(file[0], [])
            .then(function(rst) {
              //成功时执行
              that.uploadImg(rst.base64, data.target.id);
            })
            .catch(function(error) {
              //失败时执行
            })
            .always(function() {
              //不管成功或失败，都会执行
            });
        };
      }
    },
    //上传
    async uploadImg(datas, id) {
      let res = await api.uploadImg({
        file: datas
      });
      let { code, data, msg } = res.data;

      if (code == 0) {
        this.filepathdata.push(data);
      } else {
        this.$layer.msg(msg);
      }
    },
    // 删除当前上传图片
    uploadImgDelete(index) {
      this.filepath.splice(index, 1);
    }
  },
  mounted() {}
};
</script>
<style lang="less" scoped>
.c2cTrade {
  background-color: #f7f8fc;
  position: absolute;
  min-height: 100%;
  width: 100%;
  padding-top: 100px;
  
  .mainSection {
    width: 1200px;
    margin: 20px auto 0;
    height: 1120px;
    padding-bottom: 160px;
    box-sizing: border-box;
  }
  .inner {
    background-color: #fff;
    padding: 60px;
    height: 100%;
    box-sizing: border-box;

    > .title {
      font-size: 18px;
      font-weight: 600;
      color: rgba(51, 56, 94, 1);
      line-height: 100%;
      border-left: 3px solid #2d8dfe;
      padding-left: 10px;
      margin-bottom: 18px;
      margin-left: -20px;
    }
  }
  .wid50 {
    width: 50%;
  }
  .wid20 {
    width: 20%;
  }
  .wid33 {
    width: 33.33%;
  }
  .color-completed {
    color: #0da88b;
  }
  .color-cancelled {
    opacity: 0.7;
  }
  .color-confirm {
    color: #f78900;
  }
  .color-paid {
    color: #ef5756;
  }
}

.orderBox {
  .title {
    height: 22px;
    font-size: 16px;
    font-familya: PingFangSC-Medium;
    font-weight: 500;
    color: rgba(51, 56, 94, 1);
    line-height: 22px;
    margin-bottom: 14px;
  }
  .boxInner {
    box-sizing: border-box;
    background-color: #f2f6fa;
    padding: 45px 0;
    font-size: 14px;
    overflow: hidden;
  }
  .boxRow {
    overflow: hidden;
    &:not(:first-child) {
      margin-top: 46px;
    }
  }
  .boxCol {
    text-align: center;
    line-height: 24px;
    box-sizing: border-box;
    color: #33385e;
  }
}

.orderSection {
  .orderHeader {
    text-align: center;
    position: relative;
    .orderTitle {
      font-size: 16px;
      color: rgba(51, 51, 51, 1);
      font-weight: 500;
      font-familya: PingFangSC-Medium;
      > span {
        font-familya: "Roboto Medium";
      }
    }
    .orderAmount {
      > em {
        font-size: 24px;
        font-style: normal;
        color: #2d8dfe;
      }
    }
    .orderNo {
      font-size: 14px;
      color: #33385e;
      position: absolute;
      right: 0;
      margin-top: 5px;
      > em {
        font-style: normal;
        padding-left: 8px;
      }
    }
  }
  .priceAbout {
    .titleName {
      font-size: 12px;
      color: #33385e;
      opacity: 0.5;
    }
    .tradeRate {
      font-size: 14px;
      margin-top: 10px;
      em {
        font-style: normal;
        color: #0da88b;
      }
    }
  }
  .appealAbout {
    margin-top: 80px;
    .title {
      margin-bottom: 30px;
    }
    /deep/ .el-form-item__label {
      height: 20px;
      font-size: 14px;
      font-familya: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(51, 56, 94, 1);
      line-height: 20px;
      margin-bottom: 5px;
    }

    /deep/.el-form-item.is-required .el-form-item__label:before {
      display: none;
    }

    .upload-item {
      margin-left: 39px;
    }

    .appealBtn {
      width: 390px;
      height: 40px;
      background: linear-gradient(90deg, #3360ff 0%, #2d8dfe 100%);
      border-radius: 4px;
      font-size: 16px;
      color: #fff;
      text-align: center;
      margin: 18px auto;
      cursor: pointer;
    }
  }
  .uploadBox {
    width: 100%;
    height: 168px;
    border-radius: 4px;
    border: 1px dashed rgba(221, 224, 235, 1);
    position: relative;
    .uploadReady {
      width: 100%;
      height: 100%;
      line-height: 100%;
      text-align: center;
      img {
        padding-top: 32px;
        margin-bottom: 17px;
      }
      p {
        font-size: 16px;
        font-familya: PingFangSC-Regular;
        font-weight: 400;
        color: #33385e;
        line-height: 24px;
      }
      .ext {
        font-size: 14px;
        font-familya: PingFangSC-Regular;
        font-weight: 400;
        color: #33385e;
        line-height: 22px;
        opacity: 0.4;
      }
    }
    .fileImg {
      position: absolute;
      top: -1px;
      left: -1px;
      right: -1px;
      bottom: -1px;
      z-index: 1;
      background: #fff;
      padding-top: 20px;
      overflow: hidden;
      .imgItem {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        width: 130px;
        height: 130px;
        margin-right: 20px;
      }
      img {
        max-width: 100%;
        vertical-align: top;
      }
      i {
        position: absolute;
        right: -5px;
        top: -5px;
        width: 14px;
        height: 14px;
        background: url(../../assets/images/delete.png) no-repeat;
        background-size: 100% 100%;
        z-index: 99;
        cursor: pointer;
      }
      .upload {
        display: inline-block;
        vertical-align: top;
        width: 130px;
        height: 130px;
        border-radius: 3px;
        border: 1px solid rgba(221, 224, 235, 1);
        text-align: center;
        .icon {
          display: inline-block;
          vertical-align: top;
          width: 34px;
          height: 31px;
          background: url(../../assets/images/icon_add.png) no-repeat;
          background-size: 100% 100%;
          margin-top: 30px;
        }
        .text {
          opacity: 0.5;
        }
      }
    }
  }
}
</style>


